<template>
<div class="pane_friend">

    <el-dialog
        draggable
        v-model="dialogVisible"
        title="添加朋友"
        width="800"
        :before-close="handleClose"
    >
        <AddFriend ref="addFriendRef" @data-request="disableAddFriend"></AddFriend>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :disabled="enterDisable" @click="enterAddFriend">
            确认添加
            </el-button>
        </div>
        </template>    
    </el-dialog>
    <div class="search_form">
        <el-input v-model="username" placeholder="请输入用户账号" style="width: 300px;" clearable>
            <template #append>
                <el-button :icon="Search" @click="searchAccountUser"/>
            </template>
        </el-input>
    </div>
    <div class="table_pane">
        <div class="table_body">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column  show-overflow-tooltip fixed prop="fromUid" label="来自用户id" width="180" />
                <el-table-column  show-overflow-tooltip prop="formUser" label="来自用户" width="180" />
                    <el-table-column  show-overflow-tooltip prop="msgContent" label="消息内容" width="280" />
                <el-table-column  show-overflow-tooltip prop="createTime" label="创建时间" width="250" />
                <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small">消息详情</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="page_pane">
                <el-pagination
                    :page-size="tableSize"
                    layout="total, prev, pager, next"
                    :total="tableTotal"
                    @prev-click="prevClick"
                    @next-click="nextClick"
                    @current-change="currentChange"
                />
            </div>
        </div>
    </div>
    <!-- 发送消息开始 -->
     <div class="send_msg_pane">
          <el-dialog v-model="dialogSendMsg" :title="chatBox" width="800" draggable>
            <div class="msg_box">
                <SendMessageBox ref="messageBox"></SendMessageBox>
            </div>
            <template #footer>
                <div>
                    <el-input
                        v-model="messageText"
                        maxlength="30"
                        placeholder="请输入聊天内容"
                        show-word-limit
                        type="textarea"
                    />
                </div>
                <div class="button_send">
                    <el-button type="success" :disabled="isSend" @click="enterSend">发送</el-button>
                </div>
            </template>
        </el-dialog>
     </div>
     <!-- 发送消息结束 -->
      <div>
        <el-dialog v-model="dialogTransfer" :title="chatBox" width="800" draggable>
            <div>
                <PayAccountSearch ref="accountSearch" @transferRequest="transferRequest"></PayAccountSearch>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogTransfer= false">取消</el-button>
                    <el-button type="primary" :disabled="isTransferDisable" @click="enterTransfer">
                        确认转账
                    </el-button>
                </div>
            </template>
        </el-dialog>
      </div>
</div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, getCurrentInstance,ref,reactive, nextTick } from 'vue';
import { messageApi } from '@/api/apis/message';

const tableData = ref([])
const tableTotal=ref(0);
const tableSize=ref(10);
const pageSize=ref(10);
const currentChange=(num)=>{
    pageData(num);
}
//上一页
const prevClick=(num)=>{
    pageData(num);
}
//下一页
const nextClick=(num)=>{
    pageData(num);
}
const pageData=(pageNum)=>{
    messageApi.getMessagePage({pageNum:pageNum,pageSize:pageSize.value}).then((res)=>{
        tableData.value=res.data;
        tableTotal.value=res.total;
    })
}
nextTick(()=>{
    //获取用户进账信息
    pageData(1);
})
//消息中心
</script>
<style lang="css" scoped>
.table_pane{
    box-sizing: border-box;
    padding: 20px 5px;
}
</style>